<template>
	<view class="order">
		<!-- tabs区域 -->
		<view class="tabs">
			<view class="item" @click="currentIndex = index" :class="{active:currentIndex === index}" v-for="(item,index) in tabArr" :key="index">
				{{item}}
			</view>
		</view>
		<view class="callme">
			客服热线 012-1234567
		</view>
		<!-- 订单列表 -->
		<view class="list">
			<view class="orderitem" v-for="(item,index) in orderList" :key="index">
				<view class="top">
					<image :src="item.goods[0].goods_small_logo" mode=""></image>
					<view class="msg">
						<view class="text">
							{{item.goods[0].goods_name}}
						</view>
						<view class="price">
							<text>￥{{item.total_price}}.00</text><text>*{{item.total_count}}</text>
						</view>
					</view>
				</view>
				<view class="center">
					共1件商品 总计：￥{{item.total_price}}.00（含运费0.00）
				</view>
				<view class="bottom">
					<text>订单号：{{item.order_number}}</text>
					<view class="mybtn">
						支付
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				tabArr:['全部','待付款','已付款','退款/退货'],
				currentIndex:0,
				orderList:[]
			}
		},
		methods:{
			callme(){
				uni.makePhoneCall({
					phoneNumber:'012-1234567'
				})
			},
			async getList(type){
				// 读取历史订单
				var token = uni.getStorageSync('token')
				if(!token){
					uni.navigateTo({
						url:'/pages/login'
					})
					return
				}
				const res = await this.$http({
					url:'/my/orders/all',
					method:'get',
					header:{
						Authorization:token
					},
					data:{
						type:type
					}
				})
				this.orderList = res.orders
			}
		},
		onShow() {
			this.getList(1)
		}
	}
</script>

<style lang="less">
	page{
		background-color: #ddd;
	}
	.order{
		.tabs{
			background-color: #FFFFFF;
			display: flex;
			.item{
				text-align: center;
				height: 100rpx;
				line-height: 100rpx;
				flex: 1;
				&.active{
					border-bottom: 12rpx solid #eb4450;
				}
			}
		}
		.list{
			.orderitem{
				background-color: #FFFFFF;
				margin-top: 30rpx;
				padding: 0 20rpx;
				.top{
					display: flex;
					padding: 20rpx 0;
					border-bottom: 1rpx solid #ccc;
					image{
						width: 200rpx;
						height: 200rpx;
					}
					.msg{
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.text{
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}
						.price{
							display: flex;
							justify-content: space-between;
						}
					}
				}
				.center{
					height: 88rpx;
					line-height: 88rpx;
					color: #999999;
					font-size: 12px;
					border-bottom: 1rpx solid #ccc;
					text-align: right;
				}
				.bottom{
					height: 88rpx;
					line-height: 88rpx;
					font-size: 12px;
					color: #999999;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.mybtn{
						width: 156rpx;
						height: 56rpx;
						border: 1px solid #999;
						text-align: center;
						line-height: 56rpx;
						color: #eb4450;
					}
				}
			}
		}
	}
</style>
